<template>
	<view class="quantification">
		<view class="title">
			<view>{{$t('quantification.title')}}</view>
			<view>
				<image @click="goTo('/pages/quantification/quantitativeRecords')" src="@/static/image/22.png"
					mode="widthFix" />
			</view>
		</view>
		<view class="statistics">
			<view>
				<view>
					<view>VIP{{ userInfo.project_id || 0 }}</view>
					<view>{{$t('quantification.currentLevel')}}</view>
				</view>
				<view>
					<view>{{ userInfo.balance_quantify || 0 }}</view>
					<view>{{$t('quantification.quantifyAccount')}}(USDT)</view>
				</view>
				<view>
					<view>{{ UserStatisticsObj.total_quantify_income || 0 }}</view>
					<view>{{$t('quantification.totalIncome')}}</view>
				</view>

			</view>
		</view>
		<view class="trade">
			<view>
				<view>{{$t('quantification.title')}}</view>
				<view @click="goTo('/pages/quantification/quantitativeTutorial')">
					{{$t('quantification.viewIntroduction')}}
					<image src="@/static/image/25.png" mode="widthFix" />
				</view>
			</view>
			<view>
				<view class="start">
					<up-button class="btn" :disabled="(quantifyInfo.count || !userInfo.project_id) ? true : false"
						v-if="!isQuantifyLoading" @click="QuantifySettlementFn"
						:text="$t('quantification.startQuantify')"></up-button>

					<view class="loading" v-else>
						<view>{{$t('quantification.quantifying')}}</view>
						<view>
							<image src="@/static/image/gif/1.gif" mode="widthFix" />
						</view>
					</view>
				</view>
				<view class="num">{{ quantifyInfo.count }}/1</view>
				<view class="time">{{$t('quantification.resetTime')}}
					<up-count-down v-if="quantifyInfo.count" @finish="initFn" :time="getTimestampToMidnight()"
						format="HH:mm:ss"></up-count-down>
					<text v-else>{{$t('quantification.resetComplete')}}</text>
				</view>


			</view>

		</view>
		<view class="priorityPolicy">
			<view v-for="(item, idx) in QuantifyProjectList" :key="idx">
				<view>
					<view>{{ item.project_name }}</view>
					<view>
						<view v-if="userInfo.project_id > item.project_id">{{$t('quantification.higherThanThisLevel')}}
						</view>
						<view class="currentLevel" v-else-if="userInfo.project_id == item.project_id">
							{{$t('quantification.currentLevel')}}</view>
						<view class="unlock" v-else @click="QuantifyUnlockFn(item.project_id)">
							{{$t('quantification.clickToUnlock')}}</view>
					</view>
				</view>
				<view class="priorityIcon">
					<view>
						<image src="@/static/image/26.png" mode="widthFix" />
						<view>
							<view>1</view>
							<view>{{$t('quantification.dailyQuantifyTimes')}}</view>
						</view>
					</view>
					<view>
						<image src="@/static/image/27.png" mode="widthFix" />
						<view>
							<view>{{ (item.rate_min * 100 ).toFixed(2)}}% ~ {{ (item.rate_max * 100).toFixed(2) }}%
							</view>
							<view>{{$t('quantification.profitMargin')}}</view>
						</view>
					</view>
					<view>
						<image src="@/static/image/28.png" mode="widthFix" />
						<view>
							<view>≥{{ item.unlock_amount }} USDT</view>
							<view>{{$t('quantification.minimumUnlockAmount')}}</view>
						</view>
					</view>

				</view>
				<view class="popular">
					<view>
						<view>
							<view class="bor">{{$t('quantification.popular')}}</view>
							<view>{{$t('quantification.multiFactorHedging')}}</view>
						</view>
						<view @click="goTo('/pages/quantification/strategyDetails')">
							{{$t('quantification.viewDetails')}}</view>
					</view>
					<view>
						<view>
							<image src="@/static/image/coin/2.png" mode="widthFix" />Huobi
						</view>
						<view>
							<image src="@/static/image/coin/3.png" mode="widthFix" />Binance
						</view>
						<view>
							<image src="@/static/image/coin/4.png" mode="widthFix" />Coinbase
						</view>
						<view>
							<image src="@/static/image/coin/5.png" mode="widthFix" />OKX
						</view>

					</view>

				</view>
			</view>
		</view>
		<customerService />

	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { QuantifyProject, QuantifySettlementSelect, QuantifySettlement, QuantifyUnlock } from "@/api/ProjectApi";
	import { UserMoney, UserStatistics } from "@/api/UserApi";

	let QuantifyProjectList = ref<Array<any>>([])
	let userInfo = ref<any>({})
	let quantifyInfo = ref<any>({})
	let isQuantifyLoading = ref<boolean>(false)
	let UserStatisticsObj = ref<any>({})


	const initFn = () => {
		QuantifyProject().then((e) => {
			QuantifyProjectList.value = e
		})
		QuantifySettlementSelect().then((e) => {
			quantifyInfo.value = e
		})

		UserMoney().then((e) => {
			userInfo.value = e
		})
		UserStatistics().then((e) => {
			UserStatisticsObj.value = e
		})


	}
	initFn()
	const QuantifySettlementFn = async () => {
		let obj = await QuantifySettlement()
		initFn()
		if (obj?.income) {
			isQuantifyLoading.value = true
			setTimeout(() => {
				isQuantifyLoading.value = false
				instance?.goTo('/pages/index/completed?type=quantification&title=' + instance?.$t('quantification.quantifySuccess') + '&income=' + obj?.income)
			}, 3000)
		}


	}
	const QuantifyUnlockFn = (project_id : number) => {
		uni.showModal({
			content: instance?.$t('quantification.confirmUnlock', { project_id }),
			confirmText: instance?.$t('quantification.confirm'),
			cancelText: instance?.$t('quantification.cancel'),
			success: async (res) => {
				if (res.confirm) {
					await QuantifyUnlock({ project_id })
					await initFn()
					uni.showToast({ title: instance?.$t('quantification.unlockSuccess'), icon: 'none' })

				}
			}
		})
	}
</script>
<style scoped lang="scss">
	@import "../../static/scss/quantification.scss";
</style>